<template>
  <div>
    <div class="login_logo">
      <img src="https://yanxuan.nosdn.127.net/static-union/164793255107785e.png" alt="">
    </div>
    <van-form>
      <van-cell-group inset>
        <van-field v-model="username" name="用户名" label="用户名" placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]" />
        <van-field v-model="password" type="password" name="密码" label="密码" placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]" />
      </van-cell-group>
      <div style="margin: 16px;">
        <van-button round block type="primary" @click="signin">
          提交
        </van-button>
      </div>
    </van-form>
    <div class="login_footer">

    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue"
export default defineComponent({
  name: 'Login',
})
</script>

<script lang="ts" setup>
import { ref } from 'vue'
import { showToast } from 'vant';
import mockRequest from '@/utils/mockRequest'
import router from '@/router';
import { useRoute, type RouteLocationRaw } from 'vue-router';
const route = useRoute()
const username = ref('zz654321');
const password = ref('123456');
async function signin() {
  if (!username.value.trim() || !password.value.trim()) {
    return showToast('账号或密码不能为空')
  }
  if (username.value != 'zz654321' || password.value != '123456') {
    return showToast('账号或密码不正确')
  }
  try {
    const res = await mockRequest.get('/getLogin')
    localStorage.setItem('token',JSON.stringify(res.data.data.token))
    router.push(route.query.path as RouteLocationRaw)
  } catch (error) {
    showToast('登录失败')
  }
}
</script>

<style scoped>
.login_logo {
  padding: 80px 0;
  box-sizing: border-box;
  text-align: center;
}

.login_logo img {
  width: 134px;
  height: 45px;
}
</style>